<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        div {
            width: 240px;
            height: 150px;
            border: solid 1px;
            padding: 10px;
            position: absolute;
            top: 30%;
            left: calc((100% - 240px)/2);
            background-color: rgb(223, 121, 121);
        }

        button {
            position: relative;
            left: 70px;
            height: 40px;
            bottom: -30px;
        }

        body {
            background-image: url("https://aigc-image.bj.bcebos.com/miaobi/5mao/b%275LiK6Iy25bGxXzE3MjUyNDI1MDAuODU4MDU2NV8xNzI1MjQyNTAxLjUxMjQ2NzY%3D%27/1.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            margin: 0;
        }
    </style>
</head>

<body>
    <div>

        账号:<input type="text" id="account"><br>
        密码:<input type="text" id="cypher"><br>
        <label>记住密码<input type="checkbox" class="memory"></label>
        <label>下次自动登录<input type="checkbox" class="zidong"></label><br>
        <button onclick="login()">登录</button>
        <button class="register">注册</button>

    </div>
    <script>
        var account = document.getElementById(`account`)
        var cypher = document.getElementById(`cypher`)
        var register = document.querySelector(`.register`)
        var zidong = document.querySelector(`.zidong`)
        var memory = document.querySelector(`.memory`)
        var meg;
        // 
        window.onload = function () {

            meg = JSON.parse(localStorage.getItem(`userData`))
            if (meg.inp1) {
                account.value = meg.userAccount
                cypher.value = meg.userCypher
                memory.checked = true
            }
            if (meg.inp1 == true && meg.inp2 == true) {
                memory.checked = true
                zidong.checked = true
                location.assign(`./商品管理.html`)
            }
        }
        // 登录
        function login() {
            if (account.value == `` || cypher.value == ``) {
                alert(`请输入账号和密码`)
            } else if (account.value == meg.userAccount && cypher.value == meg.userCypher) {

                var message = {
                    userAccount: account.value,
                    userCypher: cypher.value,
                    inp1: false,
                    inp2: false
                }
                if (memory.checked) {
                    message.inp1 = true
                }
                if (memory.checked && zidong.checked) {
                    message.inp1 = true
                    message.inp2 = true
                }
                localStorage.setItem(`userData`, JSON.stringify(message))
                location.assign(`./商品管理.html`)
            } else if (account.value != meg.userAccount || cypher.value != meg.userCypher) {
                alert(`账号密码错误`)
            } else if (meg == null) {
                alert(`请先注册`)
            }
        }

        // 注册
        register.addEventListener(`click`, () => {
            location.assign(`./注册.html`)
        })

        // 端口号,域名,协议 是相同的,就是同源

    </script>
</body>

</html>